<template>
  <Dialog title="同步后台菜单" :loading="loading" :visible="visible" button-text="保存" @close="handleClose" @confirm="handleConfirm">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" label-position="left">
      <el-form-item label="权限设置">
        <el-cascader
          v-model="ruleForm.tableDatas"
          :options="tableDatas"
          :props="toConfigure"
          collapse-tags
          multiple
          clearable
          style="width:100%"
          @change="valChange"
        />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog";
export default {
  components: { Dialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    pageDatas: {
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {
      ruleForm: {},
      value: '',
      loading: false,
      tableDatas: [],
      toConfigure: {
        multiple: true,
        value: 'id',
        label: 'name',
      },
      rules: {},
    };
  },
  watch: {
    selectRow: {
      handler(val) {
        this.ruleForm = val;
      },
      deep: true,
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await this.$api['data/menu/getAllRabbitMenu']();
      if (res.code !== 200) return;
      this.tableDatas = res.data;
    },
    handleClose() {
      this.$emit('handleClose');
    },
    valChange(val) {
      const list = [];
      val.forEach(item => {
        list.push({ menuId: item[item.length - 1] });
      });
      console.log(list);
      this.ruleForm.roleMenuEntityList = list;
    },
    async handleConfirm() {
      const res = await this.$api['data/menu/synchronizationRabbitMenu']();
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("同步成功");
      this.$emit('handleClose');
    },
  },
};
</script>
